@size: 17.07vw;

body {
    margin: 0;
    background-image: url(../images/pf.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.top-nav {
    .top {
        width: 100%;
        height: (80 / @size);
        line-height: (80 / @size);
        background-color: rgba(231, 230, 233, 0);
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            .li {
                font-style: normal;
                list-style: none;
                margin-right: (50 / @size);
                margin-left: (50 / @size);
                font-size: (20 / @size);
                &:first-of-type {
                    font-size: (30 / @size);
                    font-style: italic;
                }
                a {
                    text-decoration: none;
                    color: #181616;
                }
            }
        }

    }
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.main {
    .list-left {
        margin-top: 10%;
        margin-bottom: 25%;
        .production-left {
            display: flex;
            align-items: center;
            
            img {
                width: 40%;
                height: auto;
                float: left;
            }
            .content {
                width: 55%;
                float: right;
                margin-top: 2%;
                padding-left: 5%;
                h2 {
                    font-size: (30 / @size);
                    margin-bottom: 10%;
                    font-weight: bold;
                }
                p {
                    font-size: (18 / @size);
                    text-align: right;
                    font-style: italic;
                }
            }
            @media screen and (max-width: 600px) {
                img {
                    text-align: center;
                    width: 100%;
                }
                .content {
                    width: 100%;
                    float: left;
                    padding: 3%;
                    h2 {
                        margin-bottom: 3%;
                        font-size: 25px;
                    }
                    p {
                        font-size: 16px;
                        text-align: left;
                    }                        
                }
            }                  
        }
        @media  screen and (max-width: 600px) {
            .production-left {
                display: block;
            }
        }
    }
    
    
    .list-right {
        margin-top: 10%;
        margin-bottom: 25%;
        .production-right {
            display: flex;
            align-items: center;
            .content {
                width: 55%;
                float: left;
                margin-top: 2%;
                padding-right: 5%;
                h2 {
                    font-size: (30 / @size);
                    margin-bottom: 10%;
                    font-weight: bold;
                }
                p {
                    font-size: (18 / @size);
                    font-style: italic;
                }
            }
            img {
                width: 40%;
                height: auto;
                float: right;
            }
            @media screen and (max-width: 600px) {
                .content {
                    width: 100%;
                    padding: 3%;
                    h2 {
                        margin-bottom: 3%;
                        font-size: 25px;
                    }     
                    p {
                        font-size: 16px;
                    }                   
                }
                
                img {
                    text-align: center;
                    width: 100%;
                    float: left;
                }
            } 
        }
        @media  screen and (max-width: 600px) {
            .production-right {
                display: block;
            }
        }
    }
}

.footer {
    text-align: center;
}